<template>
  <div class="">
    <div :id="chartId" class="chart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  props: ["chartId", "datas"],
  created(){
    this.$nextTick(()=>{
      this.$watch('datas',()=>{
        this.initChart();
      })
    })
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      let myChart = echarts.init(document.getElementById(this.chartId));
      var percent =
        (this.datas.data[0] / (this.datas.data[0] + this.datas.data[1])) * 100;
      // 绘制图表
      myChart.setOption({
        series: [
          {
            type: "gauge",
            radius: "80%",
            axisLine: {
              lineStyle: {
                width: 15,
                color: [
                  [0.3, "#67e0e3"],
                  [0.7, "#37a2da"],
                  [1, "#fd666d"],
                ],
              },
            },
            pointer: {
              itemStyle: {
                color: "auto",
              },
            },
            axisTick: {
              distance: -15,
              length: 5,
              lineStyle: {
                color: "#051044",
                width: 1,
              },
            },
            splitLine: {
              distance: -15,
              length: 15,
              lineStyle: {
                color: "#051044",
                width: 1,
              },
            },
            axisLabel: {
              color: "inherit",
              distance: 20,
              fontSize: 13,
            },
            detail: {
              show: false,
              offsetCenter: ["0", "70%"],
              color: "#fff",
              formatter: function (value) {
                return value.toFixed(1) + "%";
              },
              fontSize: 16,
            },
            data: [
              {
                value: percent,
                name: this.datas.title,
              },
            ],
            title: {
              offsetCenter: [0, "80%"], //设置在线率位置
              color: "#fff",
            },
          },
        ],
      });

      window.onresize = function () {
        // 自适应大小
        myChart.resize();
      };
    },
  },
};
</script>
<style scoped lang="scss">
.chart {
  height: 260px;
}
</style>
